/*公共圆角*/
.component,
.preview,
.param,
.main .item,
.basic,
.advance,
.code,
.command{
	border-radius: 1em;
}
/*公共flex*/
#container,
.tab,
.common,
.form,
.tools,
.param,
.handle,
.command{
	display: flex ;
}
/*头部*/
#header{
	/*position: absolute;*/
	height: 62px;
	width: 100%;
	border: 1px solid #d8dfea;
	position: relative;
}
.nav{
	width:100%;
	height: 40px;
	margin-top: -20px;
	top:50%;
	position: absolute;
}
.title,.header_menu,.person,.notebook{
	height: 100%;
	display: inline-block;
	width: auto;
	line-height: 40px;
	vertical-align: middle;
}
.title{
	font-size: 30px;
	margin-left: 30px;
}
.header_menu{
	margin-left: 50px;
	font-size: 20px;
}
.header_menu .item{
	margin: 0px 20px;
}
.header_menu .item.active,.header_menu .item:hover{
	color: #3b8cff;
}

/*主容器*/
#container {
	justify-content: center;
	align-items: flex-end;
	height: 750px;
	box-sizing: border-box;
	/*margin: 20px;*/
}


/*三个分支*/
.component{
	/*display: none;*/
}
.preview{
	/*display: none;*/
}
.param{
	/*display: none;*/
}
.component,
.preview,
.param {
	height: 720px;
	border: 1px solid #d8dfea;
	margin: 0 20px;
	border-radius: 1em;
	background-color: white;
}

.component,
.param {
	width: 350px;
	min-width: 350px;
	overflow: hidden;
}

.preview {
	width: 800px;
	min-width: 405px;
}
/*-------------------component---------------------*/

.tab,
.common,
.form,
.tools {
	width: 330px;
	margin: 0 auto;
}

.tab{
	justify-content: space-around;
	align-items: center;
	height: 30px;
	margin-top: 60px;
}

.tab_item {
	height: 30px;
	width: 80px;
	text-align: center;
}

.tab_item:hover, .tab_item.active{
	color: #3b8cff;
}


/*滑动块*/

.slider {
	height: 3px;
	background-color:#3b8cff;
	width: 80px;
	margin-left: 25px;
}


/*功能容器*/

.main {
	width: 1050px;
	overflow: hidden;
}


/*功能视图*/

.common,
.form,
.tools {
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	float: left;
	margin: 30px 10px 0 10px;
}

.main .item{
	width: 90px;
	height: 90px;
	text-align: center;
	line-height: 90px;
	border: 1px solid #d8dfea;
	margin-top: 20px;
}
.common .item:hover{
	background-color: #e4e9ec;
}
.component {
	/*display:none;*/
}

/*-------------------preview---------------------*/
.preview {
	position: relative;
	/*perspective: 1000;*/
    transform-style: preserve-3d;
}

.front, .back {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
    backface-visibility: hidden;
    transition: 1s;
    position: absolute;
    top: 0px;
    left: 0px;
}

.front {
    z-index: 2;
}
.back {
    transform: rotateY(180deg);
}

div.default{
	width: 400px;
	height:300px;
	background-color: white;
	border: 1px solid #d8dfea;
	cursor: move;
	border: 1px solid #CCCCCC;  
	position: absolute;
}
.coor{
	width: 10px;
	height: 10px; 
	overflow: hidden; 
	cursor: se-resize; 
	position: absolute; 
	right: 0; 
	bottom: 0; 
	background-color: #09C;
}
.code{
	height: 65%;
	outline: none !important;
	color:#A70A84;
}
.code,.command{
	padding: 25px;
	border: 1px solid #d8dfea;
}
.command{
	height: 15%;
	margin-top: 20px;
	justify-content: space-around;
	align-items: center;
	
}
.default{
	position: absolute;
}
button{
	width: 100px;
	height: 50px;
}
.number{
	background-color:#e4e9ec ;
	text-indent: 15px;
	height: 30px;
	width:80px;
}
.command_input{
	width: 400px;
	height: 50px;
	
}
@keyframes shake
{
	from {
		box-shadow: 0px 0px 5px blueviolet;
	}
	to {
		box-shadow: 0px 0px 20px blueviolet;
	}
}

.default.active{
	animation:shake 1.5s linear infinite alternate;
}
.tag{
	color: blueviolet;
}
.sign{
	color:gray;
}
.attr{
	color:rgb(60,122,3);
}
/*-------------------param---------------------*/

.param,.menu .item{
	flex-direction: column;
	box-sizing: border-box;
}
.param{
	align-items: center;
}
.basic,
.advance {
	border: 1px solid #d8dfea;
	padding: 15px 10px;
	box-sizing: border-box;
	width: 290px;
}

.basic {
	height: 35%;
	margin: 30px;
}

.advance {
	height: 50%;
}
.fold,.menul{
	overflow: hidden;
	height: auto;
}
.fold{
	display: none;
}
.menu,.menul{
	overflow: visible;
	padding: 5px;
	position: relative;
}
.menu,.fold,.menul{
	text-indent: 5px;
	border-radius: 7px;
	line-height: 30px;
}
.menul .menu{
	padding: 0;
}
.fold .menu.item{
	padding: 5px 0 5px 0;
	position: static;
}
.menu:hover,.menul:hover{
	background-color: #eff4f8;
}
.select_box{
	box-sizing: border-box;
	width: 100px;
	height: 30px;
  	border: 1px solid #d8dfea;
  	top:5px;
  	right: 5px;
  	line-height: 26px;
  	float: right;
}
.select_box,.option{
  	text-align: center;
  	border-radius:10px;
}

.ss{
	width: 30px;
	float: right;
	text-align: center;
	transition: 0.75s;
	font-size:30px;
	line-height: 25px;
	
}
.ss.rotate{
	transform: rotate(90deg);
}
.option{
	position: absolute;
	right: 5px;
	margin-top: 5px;
	box-shadow: 0 0 5px;
	width: 100px;
	height: auto;
	background-color: #eff4f8;
	z-index: 100;
	display: none;
}
.option>li:hover{
	background-color:#e4e9ec;
}
.menu input{
	display: inline-block;
	float: right;
}
